<template>
    <div class="container">
        <!-- 顶部 -->
        <tab-head></tab-head>

        <!-- 内容 -->
        <van-tabs @change="tabsChange" v-model:active="active" type="card" class="homeClass" title-active-color="#fff">
            <van-tab name="xmgk" title="项目概况"
                title-style="font-size: 15px; font-weight: 600;height:32px;display:flex;justify-content: start;padding-left: 10px;">
                <div class="titleClass">
                    <van-image style="width: 100%; height: 160px;margin-top: 10px;" fit="fill"
                        :src="app.baseUrl + app.projectInfo.projectLogo"></van-image>
                    <div
                        style="height:calc(100% - 190px);width: 100%;font-size: 12px;overflow-y: scroll;overflow-x: hidden;">
                        <div class="flexLr borderB" style="padding: 10px 0;">
                            <img src="../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <div class="flexLr" style="width:95%;letter-spacing: 1px;">
                                <div class="Textellipsis">项目名称：{{ app.projectInfo.projectName }}</div>
                            </div>
                        </div>
                        <div class="flexLr borderB" style="padding: 10px 0;">
                            <img src="../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <div class="flexLr" style="width:95%;letter-spacing: 1px;">
                                <div class="Textellipsis">工程地址：{{ app.projectInfo.projectAddr }}</div>
                            </div>
                        </div>
                        <div class="flexLr borderB" style="padding: 10px 0;">
                            <img src="../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <div class="flexLr" style="width:95%;letter-spacing: 1px;">
                                <div class="Textellipsis">工程类型：{{ classify(app.projectInfo.projectType) }}</div>
                            </div>
                        </div>
                        <div class="flexLr borderB" style="padding: 10px 0;">
                            <img src="../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <div class="flexLr" style="width:95%;letter-spacing: 1px;">
                                <div class="Textellipsis">工程规模：{{ app.projectInfo.projectScale }}</div>
                            </div>
                        </div>
                        <div class="flexLr borderB" style="padding: 10px 0;">
                            <img src="../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <div class="flexLr" style="width:95%;letter-spacing: 1px;">
                                <div class="Textellipsis">工程造价：{{ app.projectInfo.projectCost }}万元</div>
                            </div>
                        </div>
                        <div class="flexLr borderB" style="padding: 10px 0;">
                            <img src="../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <div class="flexLr" style="width:95%;letter-spacing:1px">
                                <div class="Textellipsis">合同工期：{{
                                    app.projectInfo.contractStart ? app.projectInfo.contractStart.substring(0,
                                        10) + ' — ' + app.projectInfo.contractEnd.substring(0, 10) : '' }}</div>
                            </div>
                        </div>
                        <div class="flexLr" style="align-items: start;padding-top: 10px;height: 56%;">
                            <img src="../../assets/images/home/ListTitleicon.png" width="16" alt="">
                            <div style="width:95%;overflow: hidden;overflow-y: scroll;;letter-spacing:1px">
                                <div>参建单位：
                                    <br />
                                    <br />
                                    <div class="flexLr" style="align-items: start;justify-content: flex-start;">
                                        <div>
                                            建设单位：
                                        </div>
                                        <div style="width: 70%;">
                                            <template v-if="app.projectInfo.buildUnit">
                                                <div
                                                    v-for="(el, inx) in app.projectInfo.buildUnit.split(',').map(el => el)">
                                                    {{ el }}
                                                    <br />
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="flexLr" style="align-items: start;justify-content: flex-start;">
                                        <div>
                                            监理单位：
                                        </div>
                                        <div style="width: 70%">
                                            <template v-if="app.projectInfo.supervisionUnit">
                                                <div
                                                    v-for="(el, inx) in app.projectInfo.supervisionUnit.split(',').map(el => el)">
                                                    {{ el }}
                                                    <br />
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="flexLr" style="align-items: start;justify-content: flex-start;">
                                        <div>
                                            设计单位：
                                        </div>
                                        <div style="width: 70%;">
                                            <template v-if="app.projectInfo.designUnit">
                                                <div
                                                    v-for="(el, inx) in app.projectInfo.designUnit.split(',').map(el => el)">
                                                    {{ el }}
                                                    <br />
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="flexLr" style="align-items: start;justify-content: flex-start;">
                                        <div>
                                            勘察单位：
                                        </div>
                                        <div style="width: 70%;">
                                            <template v-if="app.projectInfo.surveyUnit">
                                                <div
                                                    v-for="(el, inx) in app.projectInfo.surveyUnit.split(',').map(el => el)">
                                                    {{ el }}
                                                    <br />
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                    <br />
                                    <div class="flexLr" style="align-items: start;justify-content: flex-start;">
                                        <div>
                                            施工单位：
                                        </div>
                                        <div style="width: 70%;">
                                            <template v-if="app.projectInfo.constructionUnit">
                                                <div
                                                    v-for="(el, inx) in app.projectInfo.constructionUnit.split(',').map(el => el)">
                                                    {{ el }}
                                                    <br />
                                                </div>
                                            </template>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </van-tab>
            <van-tab name="dsj" title="大事记"
                title-style="font-size: 15px; font-weight: 600;height:32px;display:flex;justify-content: start;padding-left: 10px;">
                <div class="titleClass">
                    <van-swipe class="my-swipe" style="width: 100%; height: 160px;margin-top: 18px;" :autoplay="3000"
                        indicator-color="white">
                        <van-swipe-item v-for="el in imageList" :key="el.id">
                            <van-image style="height: 100%;width: 100%;" fit="fill" :src="app.baseUrl + el.fileurl" />
                        </van-swipe-item>
                    </van-swipe>
                    <div style="height: calc(100% - 185px);overflow: hidden;overflow-y: scroll;">
                        <div class="flexLr borderB" @click="dsjClick(el)" v-for="el in InfoList"
                            style="padding: 10px 0;font-size: 12px;">
                            <img src="../../assets/images/home/Listinfoicon.png" width="16" alt="">
                            <div class="flexLr" style="letter-spacing: 1px;width: 95%;margin-left: 4px;">
                                <div style="width:70%;">
                                    <div class="Textellipsis">{{ el.title }}</div>
                                </div>
                                <div>{{ el.publishtime.length > 10 ? el.publishtime.substring(0, 10) : el.publishtime }}
                                </div>
                            </div>
                        </div>
                        <p style="text-align: center;margin:20px 40px;font-size: 14px;">没有更多了</p>
                    </div>
                </div>
            </van-tab>

            <van-popup v-model:show="dsjPopup" closeable close-icon="close"
                :style="{ height: '40%', width: '80%', padding: '46px 14px 10px 14px', 'fontSize': '14px', background: 'rgba(0,0,0,0.5)' }">
                <div class="flexLr" style="align-items: start;width:100%;height:100%;">
                    {{ dsjInfo.content }}
                </div>
            </van-popup>

            <template #nav-right></template>
        </van-tabs>

        <!-- 底部导航 -->
        <tab-bar></tab-bar>
    </div>
</template>

<script name="Home">
import { defineComponent, ref, reactive, onMounted } from "vue";
import { Tab, Tabs } from 'vant';
import { useAppStore } from "../../store";
import { GetMemfileList, GetMemList } from "@/api";
export default defineComponent({
    setup() {
        const app = useAppStore()
        const dsjPopup = ref(false)
        const dsjInfo = ref({})
        const imageList = ref([])
        const InfoList = ref([])
        const active = ref('xmgk')
        const classify = (key) => {
            switch (key) {
                case 1:
                    return "水务"
                case 2:
                    return "地铁"
                case 3:
                    return "公路"
                case 4:
                    return "房建"
                case 5:
                    return "其他（矿山修复、水环境、固废）"
                default:
                    break;
            }
        }
        const dsjClick = (el) => {
            dsjPopup.value = true
            dsjInfo.value = el;
        }
        const getImgList = () => {
            const form = new FormData();
            let data = {
                xid: app.projectInfo.id,
                searchword: "",
                pageindex: 1,
                pagesize: 99999
            }
            for (let key in data) {
                form.append(key, data[key]);
            }
            GetMemfileList(form).then(res => {
                imageList.value = res.data;
            })
        }
        const getInfoList = () => {
            const form = new FormData();
            let data = {
                xid: app.projectInfo.id,
                searchword: "",
                pageindex: 1,
                pagesize: 99999
            }
            for (let key in data) {
                form.append(key, data[key]);
            }
            GetMemList(form).then(res => {
                InfoList.value = res.data;
            })
        }
        getImgList()
        getInfoList()
        const tabsChange = (e) => {
            if (e == 'dsj') {
                getInfoList()
            } else {
                getImgList()
            }
        }
        return {
            app,
            classify,
            imageList,
            InfoList,
            active,
            tabsChange,
            dsjPopup,
            dsjClick,
            dsjInfo
        };
    },
});
</script>

<style lang="less" scoped>
.container {
    height: 100%;
    width: 100%;
}

.homeClass {
    margin: 5%;
    height: 82%;
    color: #fff;
    background-color: rgba(18, 48, 95, 0.4);

    :deep(.van-tabs__content) {
        height: 94%;
    }

    :deep(.van-tab__panel) {
        height: 100%;
    }

    :deep(.van-tabs__nav) {
        background: none;
    }

    .borderB {
        border-bottom: 4px solid #728b9a6b;
    }

    :deep(.van-tabs__nav--card) {
        margin: 0;
        border: none;
    }

    :deep(.van-tab--card) {
        background: url(../../assets/images/home/大事记.png) no-repeat;
        background-size: 100% 100%;
        color: #8991A2;
        border-right: none;
        margin-right: 2%;
    }

    :deep(.van-tab--card.van-tab--active) {
        background: url(../../assets/images/home/项目概况.png) no-repeat;
        background-size: 100% 100%;
    }

    .titleClass {
        height: 100%;
        margin: 15px;
    }
}
</style>